<template>
    <section>
        <!--搜索工具条-->
        <el-col :span="24" class="toolbar" style="padding-bottom: 0px; ">
            <el-form :inline="true" :model="filters" ref="filters">
                <div class="col-title">检查全过程统计</div>
                <el-form-item prop="year">
                    <el-select
                            placeholder="年份" v-model="filters.year" size="12px">
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in options.years"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="belong">
                    <el-select
                            placeholder="高校所属" v-model="filters.belong" size="12px" clearable>
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_department"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="arts_type">
                    <el-select
                            placeholder="文理分类" v-model="filters.arts_type" size="12px" clearable>
                        <el-option :key="item.key" :label="item.value" :value="item.key"
                                   v-for="item in dict.univ_pro"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item prop="provinces">
                    <el-select
                            placeholder="地域" v-model="filters.provinces" size="18px" clearable>
                        <el-option :key="item" :label="item" :value="item"
                                   v-for="item in dict.provinces"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="search">搜索</el-button>
                    <el-button @click="reset">重置</el-button>
                    <el-button  >导出Excel</el-button>
                </el-form-item>
            </el-form>
        </el-col>
        <el-col :span="8" >
            <div class="corrected-total tijiao-days">
                <p>
                    至首次提交报告平均用时 <br>
                    <span>{{tijiaopingjuntianshu}}</span>天
                </p>
            </div>
        </el-col>
        <el-col :span="8" >
            <div class="corrected-total shenhe-days">
                <p>
                    至组长审核通过平均用时<br>
                    <span>{{shenhepingjuntianshu}}</span>天
                </p>
            </div>
        </el-col>
        <!--搜索结果表格-->
        <el-table
                :header-row-style="headerRowStyle"
                :data="tableShowData"
                stripe
                v-loading="listLoading"
                style="width: 100%;"
                @sort-change="tabSort"
        >
            <el-table-column
                    label="高校名称"
                    prop="unit_Name"
                />
            <el-table-column
                    align="center"
                    label="现场检查日期"
                    sortable="custom"
                    prop="check_begin"/>
            <el-table-column
                    align="center"
                    label="下达整改通知书日期"
                    sortable="custom"
                    prop="transmit_report"/>
            <el-table-column
                    align="center"
                    label="首次提交报告日期"
                    sortable="custom"
                    prop="submit_report"/>
            <el-table-column
                    align="center"
                    label="组长审核通过日期"
                    sortable="custom"
                    prop="audit_pass"/>
            <el-table-column
                    align="center"
                    label="至首次提交报告用时（天）"
                    sortable="custom"
                    prop="submit_report_days"/>
            <el-table-column
                    align="center"
                    label="至组长审核通过用时（天）"
                    sortable="custom"
                    prop="audit_report_days"/>
        </el-table>

        <!--分页-->
        <el-col :span="24" class="toolbar">
            <el-pagination
                    style="text-align: center;"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :page-size="pager.page_size"
                    :page-sizes="pager.sizes"
                    background
                    :current-page="pager.page_current"
                    layout="prev,pager,next,sizes,total"
                    :total="pager.total">
            </el-pagination>
        </el-col>
    </section>
</template>

<script>
    import {checkOverAllProcess} from '../../api/statistics_api'
    import {get_file} from "../../api/common";
    import { saveAs } from 'file-saver';
    import dict from '../../common/js/dict';
    export default {
        computed:{

        },
        data() {
            return {
                tijiaopingjuntianshu: 0,//提交报告平均用时
                shenhepingjuntianshu: 0,//审核报告平均用时

                dict:dict,
                currentYear: '2018',
                //表单header样式
                headerRowStyle: {
                    backgroundColor: "#ddd",
                    color: "#333",
                    textAlign: "center",
                },
                pieChartLoading: false,
                listLoading: false,
                //表格数据
                tableData: [],
                tableShowData: [],
                filters: {
                    year: '',
                    belong:'',
                    arts_type:'',
                    provinces:'',
                },
                //分页设置
                pager: {
                    sizes: [10, 20, 30, 40, 50],
                    total: 0,
                    page_size: 10,
                    page_current: 1
                },
                options: {
                    years: []
                }
            }
        },
        methods: {
            //分页page_size发生改变
            handleSizeChange(val) {
                this.pager.page_current = 1;
                this.pager.page_size = val;
                this.setPages();
            },
            //分页page_current发生改变
            handleCurrentChange(val) {
                this.pager.page_current = val;
                this.setPages();
            },
            search(){
                this.pager.page_current = 1;
                this.getTableData();
            },

            reset(){
                this.$refs['filters'].resetFields();
                this.currentYear = (new Date()).getFullYear()+'';
                this.filters.year = this.currentYear;
                this.pager.page_current = 1;
                this.getTableData();
                },
            compare(attr,rev){
                if(rev == null)
                    rev = 1
                else
                    rev = (rev) ? 1 : -1
                return (a,b) => {
                    a = a[attr]
                    b = b[attr]

                    if(Number(a) < Number(b)){
                        return rev * -1
                    }
                    if(Number(a) > Number(b)){
                        return rev * 1
                    }
                    return 0
                }
            },
            setPages(){
                let tempData = JSON.parse(JSON.stringify(this.tableData))
                let start = 0, end = 0
                end = this.pager.page_current *  this.pager.page_size
                start = end - this.pager.page_size
                this.tableShowData = tempData.slice(start, end)
            },
            tabSort(column){
                let tempData = JSON.parse(JSON.stringify(this.tableData))
                let rev = column.order == 'ascending' ? true : false
                tempData.sort(this.compare(column.prop,rev))
                this.tableData = tempData
                this.setPages()
            },
            getTableData(){
                this.listLoading = true;
                checkOverAllProcess(this.filters).then(res => {
                    if(res.data.status == 200){
                        let tempData =JSON.parse(res.data.datas)
                        this.pager.total = tempData.length
                        this.tableData = tempData;

                        //计算平均值
                        if(this.pager.total > 0){
                            var tijiaoTotal = 0;
                            var shenheTotal = 0;
                            this.tableData.map(data=>{
                                tijiaoTotal+=data.submit_report_days;
                                shenheTotal+=data.audit_report_days;
                            });
                            this.tijiaopingjuntianshu = parseInt(tijiaoTotal/this.pager.total);
                            this.shenhepingjuntianshu = parseInt(shenheTotal/this.pager.total);
                        }

                        this.tabSort({prop:'check_begin', order:'ascending'})
                    }
                    this.listLoading = false;
                })
            },
            initYears() {
                this.currentYear = (new Date()).getFullYear()+'';
                this.filters.year = this.currentYear;
                for (let i = this.currentYear; i >= 2018; i--) {
                    this.options.years.push(i);
                }
            },
            //初始化页面
            initData() {
                this.initYears();
                this.getTableData();
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.initData();
            })
        }
    }
</script>
<style scoped lang="scss">
.mt30{
    margin-top:30px;
}
.col-title{
    display:inline-table;
    font-weight:600;
    font-size:16px;
    color:#333;
    padding:0 30px 0 15px;
}
    .corrected-total{
        height:180px;
        border-radius: 8px;
        margin:20px;
        font-size:20px;
        color:#fff;
        padding-left:60px;
        -webkit-box-shadow: 3px 5px 15px 0 #d6ddf4;
        box-shadow: 3px 5px 15px 0 #d6ddf4;
        >p{
            padding-top:40px;
            line-height: 40px;
        }
        &.tijiao-days{
            background:#6a91ec url('../../assets/images/img_tijiaobaogao.png') center right no-repeat;
            background-size: 120px;
        }
        &.shenhe-days{
            background:#70cfef url('../../assets/images/img_shenhetongguo.png') center right no-repeat;
            background-size: 90px;
        }
        span{
            font-size:50px;
        }
    }
</style>
